<template>
  <div class="bgm-wrap">
    <Header/>

    <div class="content-wrap">
      <div class="item">
        <div class="label">{{ step1Data.name.label }}:</div>
        <div class="input"><input type="text" maxlength="10" v-model="step1Data.name.value.value"></div>
      </div>
      <div class="item">
        <div class="label">{{ step1Data.year.label }}:</div>
        <div class="input" @click="popupVisible = true">
          <input type="text" readonly :value="step1Data.year.valueName.value">
        </div>
      </div>
    </div>
    <div class="next-btn fixed" @click="submit"></div>
  </div>

  <van-overlay :show="popupVisible" @click="popupVisible = false">
  </van-overlay>

  <transition name="van-slide-up">
    <div class="date-wrap" v-if="popupVisible">
      <van-picker
        v-model="popupValue"
        title="入职时间"
        :columns="years"
        @confirm="onConfirm"
        @cancel="popupVisible = false"
      />
    </div>
  </transition>
</template>

<script setup>
  import { stepAction, step2Data, step1Data } from '@/stores'
  import { getMisc, getStyles } from '@/api'

  const popupVisible = ref(false)
  const years = shallowRef([])
  const popupValue = ref([])

  getMisc()
  .then(response => {
    const { data: { years: { start_year, end_year } , styles } } = response

    handleYears(start_year, end_year)
    //handleTabData(styles)
  })

  function handleYears(start_year, end_year) {
    const yearsArr = []

    for (let i = start_year; i <= end_year; i++) {
      yearsArr.push({ text: `${ i }年`, value: i })
    }
    yearsArr.push({ text: `无`, value: '' })

    years.value = yearsArr
    popupValue.value = [new Date().getFullYear()]
  }

  function handleTabData(styles) {
    const requests = Object.keys(styles).map(key => {
      return new Promise(resolve => {
        getStyles({ style_type: key })
          .then(({ data }) => {
            resolve({ name: styles[key], list: data })
          })
      })
    })

    Promise.allSettled(requests).then(results => {
      step2Data.tabData.value = results.map(({ value }) => value)
    })
  }

  function onConfirm(selected) {
    const { value, text } = selected.selectedOptions[0]
    popupValue.value = [value]
    step1Data.year.value.value = value
    step1Data.year.valueName.value = text
    popupVisible.value = false
  }

  function submit() {
    /*
    const error = Object.values(step1Data).find(item => !item.value.value)
    if (error) return showToast(error.label)
    */
    if (!step1Data.name.value.value) {
      return showToast(step1Data.name.label);
    }
    console.log('step1Data =>', step1Data)
    getMisc()
    .then(response => {
      const { data: { years: { start_year, end_year } , styles } } = response
      const tmpStyles = {}
      console.log("year =>", step1Data.year.value.value)
      console.log("styles =>", styles)
      Object.keys(styles).forEach(key =>{
        let reqFlag = true
        if (key == 'onduty' && step1Data.year.value.value === '') {
          reqFlag = false
        }
        if (reqFlag) {
          tmpStyles[key] = styles[key]
        }
      })
      
      handleTabData(tmpStyles)
    })

  function handleTabData(styles) {
    const requests = Object.keys(styles).map(key => {
      return new Promise(resolve => {
        getStyles({ style_type: key })
          .then(({ data }) => {
            resolve({ name: styles[key], list: data })
          })
      })
    })

    Promise.allSettled(requests).then(results => {
      step2Data.tabData.value = results.map(({ value }) => value)
    })
    console.log(step2Data.tabData.value)
  }
  

    stepAction.next()
  }
</script>

<style scoped lang="scss">
  .content-wrap {
    padding: .3rem;

    .item {
      font-weight: bold;
      font-size: .16rem;
      margin-bottom: .24rem;

      .label {
        color: #00418F;
        margin-bottom: .12rem;
      }

      .input {
        border-bottom: 1px solid #666666;
        padding-bottom: .05rem;

        input {
          color: #333333;
          border: none;
          background-color: transparent;
        }
      }
    }
  }

  .date-wrap {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 20;
  }
</style>
